<template>
  <section class="movieContent-main" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.8)">
    <div class="movieAll">
      <div class="classroom-main">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item class="hander" to="/index">首页</el-breadcrumb-item>
          <el-breadcrumb-item class="hander" :to="path">{{menuName}}</el-breadcrumb-item>
          <el-breadcrumb-item>课程详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="courser-top">

        <img :src="$axios.defaults.baseURL+content.photo" alt="" class="course-main">
        <div class="course-right">
          <h3 class="title">{{content.courseName}}</h3>
          <!-- <img src="@/assets/images/vip-icon.png" alt="" class="vip-icon"> -->
          <div class="ping">
            <span class="title1">评价：</span>
            <el-rate v-model="content.score" disabled show-score text-color="#ff9900" score-template="{value}"
              class="rate-main"></el-rate>
            <span class="teacher1">({{content.studyCount}}人学习)</span>
          </div>

         <div class="ping" v-show="content.courseType=='4'">
            <span class="title1" >开课时间：{{content.courseStartDate}}</span>
            <span class="teacher1" style="margin-left: 50px;">开课地点：{{content.address}}</span>
          </div>


          <p class="price" v-show="Number(content.presentPrice)!=0">￥{{content.presentPrice}} <span
              class="old-price">￥{{content.originalPrice}}</span> <span class="keshi">{{countObj.detailsCount}}课时</span>
          </p>



          <p class="price" v-show="Number(content.presentPrice)==0">免费
            <span class="keshi" v-show="content.courseType=='1'">{{countObj.detailsCount}}课时</span>
            <span class="keshi" v-show="content.courseType=='6'">{{countObj.detailsCount}}课时</span>
            <span class="keshi" v-show="content.courseType=='3'">开播时间:{{content.startTime}}</span>
          </p>
          <!-- <p class="price" v-if="content.courseVipType=='1'">会员课程 </p>
              <p class="price" v-if="content.courseVipType=='3'">免费课程 </p> -->
          <!-- <p class="price" v-if="content.courseVipType!='2'"></p> -->
          <!-- <el-button type="primary"  class="sou iconfont iconxin"  @click="collect" v-show="!content.collection"></el-button>
              <el-button type="primary"  class="sou" v-show="content.collection" @click="collect">取消收藏</el-button> -->
          <p class="content">{{content.introduction}}</p>

          <!-- ppt课程学习 -->
          <div class="mai" @click="gotoPPT" v-show="content.courseType=='6'">开始学习</div>

          <div class="mai" @click="addXuexi" v-show="content.courseType=='5' && content.buyFlag==false">开始学习</div>
          <div class="mai" v-show="content.courseType=='5' &&  content.buyFlag==true">已报名</div>
          <!-- <div class="mai"  v-show="content.courseType=='5'">已加入</div> -->
          <div class="mai" v-show="!content.buyFlag && !content.isTree" @click="buyCourse">购买课程</div>
          <div class="mai " :class="{'nosee' : muluList1.length==0 }" @click="see"
            v-show="(content.buyFlag || content.isTree) && (content.courseType=='1')">立即观看</div>

          <div class="mai" :class="{'nosee' : content.zbStatus!='1'||!content.channelNo }"
            @click="(content.zbStatus=='1'&&content.channelNo) && see()"
            v-show="(content.buyFlag || content.isTree) && (content.courseType=='3')">立即观看</div>


          <div class="mai" @click="activeName='second'" v-show="content.buyFlag  && content.courseType=='4'">已报名</div>
          <div class="mai" @click="activeName='second'" v-show="!content.buyFlag   && content.courseType=='4'">立即报名
          </div>
          <div class="see" @click="see" v-show="!content.buyFlag && !content.isTree && content.auditionFlag=='1'">立即试看
          </div>
          <div class="text" v-show="content.courseType=='4' &&(!content.buyFlag  && !content.isTree)">(面授课程)</div>
          <div class="text" v-show="content.courseType=='4' &&(content.buyFlag  || content.isTree)">(报名时间:
            {{content.validityStartDate}} - {{content.validityEndDate}})</div>


          <div class="text" v-show="content.courseType=='1'">(点播课程)</div>
          <div class="xin">
            <!-- <span class="number iconfont iconzan" v-show="!content.zan" @click="setZan"></span>
                <span class="number iconfont iconzan iconzan1 " v-show="content.zan" @click="setZan"></span> -->
            <i class="iconfont iconxin" v-show="!content.collection" @click="collect"></i>
            <i class="iconfont iconxin iconxin1" v-show="content.collection" @click="collect"></i>
          </div>
        </div>
      </div>
      <div class="course-content1">
        <div class="content-left" v-show="content.courseType!='3'">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程概览" name="first" style="background:#ffffff;width:100%;float:left;">
              <div class="course-text" v-html="content.description">
              </div>
              <nodata v-show="content.description=='' && start"></nodata>
            </el-tab-pane>
            <el-tab-pane :label="label" name="second">
              <div class="pre-box" v-show="content.courseType=='1' && login">
                <div class="pre-main">
                  <div class="pre-top">
                    <el-progress :text-inside="true" :stroke-width="20" :percentage="cjindu" class="pre-jin">
                    </el-progress>
                    <!-- <el-progress :text-inside="true" :stroke-width="20" v-if="!cjindu" :percentage="zero" class="pre-jin"></el-progress> -->
                    <div class="study"
                      :class="{'nosee' : (muluList1.length==0)||(countObj.studyCount>=muluList1.length) }"
                      @click="goStudy">{{text}}</div>
                  </div>
                  <div class="pre-bottom">
                    <p class="text">目前已完成：<span style="font-size:18px;color:#444444;">{{countObj.studyCount}}
                      </span>课时,加油啊！</p>
                    <span class="next">下一课时：{{nextTitle}}</span>
                  </div>
                </div>
              </div>

              <div class="pre-box" v-show="content.courseType=='6' && login">
                <div class="pre-main">
                  <div class="pre-top">
                    <el-progress :text-inside="true" :stroke-width="20" :percentage="cjindu" class="pre-jin">
                    </el-progress>
                    <!-- <el-progress :text-inside="true" :stroke-width="20" v-if="!cjindu" :percentage="zero" class="pre-jin"></el-progress> -->
                    <div class="study"
                      :class="{'nosee' : (muluList1.length==0)||(countObj.studyCount>=muluList1.length) }"
                      @click="gotoPPT">{{text}}</div>
                  </div>
                  <div class="pre-bottom">
                    <p class="text">目前已完成：<span style="font-size:18px;color:#444444;">{{countObj.studyCount}}
                      </span>课时,加油啊！</p>
                    <span class="next">下一课时：{{nextTitle}}</span>
                  </div>
                </div>
              </div>

              <div class="catalog" v-show="content.courseType=='1'">
                <h3 class="mu-title">目录</h3>
                <div class="course-item">
                  <div class="top">
                    <span class="text">课程</span>
                    <span class="index">1</span>
                    <span class="name">{{content.title}}</span>
                  </div>
                  <div class="line-main">
                    <el-timeline :reverse="reverse">
                      <el-timeline-item v-for="(item1, index1) in muluList1" :key="index1">
                        <span class="name" v-show="item1.detailType=='1'">课时</span>
                        <span class="name" v-show="item1.detailType=='2'">考试</span>
                        <span class="main-name" v-show="item1.detailType=='1'">{{item1.detailName}}</span>
                        <span class="main-name" v-show="item1.detailType=='2'">{{item1.detailName}}</span>
                        <div class="right" v-show="content.show && item1.detailType=='1'">
                          <span class="name1">学习进度：</span>
                          <el-progress :percentage="item1.study"></el-progress>
                          <!-- <el-progress :percentage="item1.study"></el-progress> -->
                        </div>
                        <div class="right-box">
                          <span class="time iconfont iconbofang"
                            v-show="item1.detailType=='1' && item1.timeTesx!=0">{{item1.timeTesx}}</span>
                          <div class="bofang" style="background:#ff6c62;"
                            v-show="!content.buyFlag && !content.isTree && content.auditionFlag=='1' && item1.detailType=='1'"
                            @click="goSee(item1)">立即试看</div>
                          <div class="bofang" style="background:#ff6c62;"
                            v-show="(content.buyFlag || content.isTree) && item1.detailType=='1'" @click="goSee(item1)"
                            :class="{'noClick':!item1.studyFlag}">立即观看</div>

                          <div class="bofang" style="background:#ff6c62;" v-show="item1.detailType=='2'"
                            @click="goTest(item1)" :class="{'noClick':!item1.studyFlag}">开始测试</div>

                          <div class="bofang" style="background:#ff6c62;"
                            v-show="!content.buyFlag && !content.isTree && content.auditionFlag=='0' && item1.detailType=='1'"
                            @click="buyCourse">请购买</div>
                        </div>
                      </el-timeline-item>
                    </el-timeline>
                    <nodata v-show="muluList1.length==0 && start"></nodata>
                    <div class="test-item" v-for="(item,index) in 0">
                      <span class="text">结业考试</span>
                      <span class="iconfont iconjihua1"></span>
                      <span class="name1">{{item.title}}</span>
                      <span class="start" @click="goPage('/paper/'+item.id+'/'+item.id)"
                        :class="{'noTest':!isTest}">开始考试</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="catalog" v-show="content.courseType=='6'">
                <h3 class="mu-title">目录</h3>
                <div class="course-item">
                  <div class="top">
                    <span class="text">课程</span>
                    <span class="index">1</span>
                    <span class="name">{{content.title}}</span>
                  </div>
                  <div class="line-main">
                    <el-timeline :reverse="reverse">
                      <el-timeline-item v-for="(item1, index1) in pptList" :key="index1">
                        <span class="name">课时</span>
                        <span class="main-name">{{item1.detailName}}</span>
                        <div class="right" >
                          <span class="name1">学习进度：</span>
                          <el-progress :percentage="item1.study"></el-progress>
                          <!-- <el-progress :percentage="item1.study"></el-progress> -->
                        </div>
                        <span class="main-name1">共{{item1.totalPage}}页</span>
                        <div class="right-box">
                          <div class="bofang" style="background:#ff6c62;" @click="goPPT(item1)"
                            :class="{'noClick':!item1.studyFlag}">立即观看</div>
                          <!-- <div class="bofang" style="background:#ff6c62;"
                            v-show="(content.buyFlag || content.isTree)" @click="goPPT(item1)"
                            :class="{'noClick':!item1.studyFlag}">立即观看</div> -->
                        </div>
                      </el-timeline-item>
                    </el-timeline>
                    <nodata v-show="pptList.length==0 && start"></nodata>
                    <div class="test-item" v-for="(item,index) in 0">
                      <span class="text">结业考试</span>
                      <span class="iconfont iconjihua1"></span>
                      <span class="name1">{{item.title}}</span>
                      <span class="start" @click="goPage('/paper/'+item.id+'/'+item.id)"
                        :class="{'noTest':!isTest}">开始考试</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="sign" v-show="content.courseType=='4' && !content.buyFlag">
                <div class="baoming-content">
                  <h3 class="title">报名课程：{{content.title}}</h3>
                  <div class="baoming-input">
                    <span class="name2">姓名：</span>
                    <el-input v-model="input2" class="text-input"></el-input>
                  </div>
                  <div class="baoming-input">
                    <span class="name2">性别：</span>
                    <el-select v-model="value" placeholder="请选择" class="sex-select">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="baoming-input">
                    <span class="name2">手机号：</span>
                    <el-input v-model="input3" class="text-input"></el-input>
                  </div>
                  <!-- <div class="baoming-input">
                          <span class="name2">身份证：</span>
                          <el-input v-model="input5"  class="text-input"></el-input>
                        </div> -->
                  <div class="baoming-button" @click="sign" v-show="!content.buyFlag">
                    立即报名
                  </div>

                  <div class="baoming-button" v-show="content.buyFlag">
                    已报名
                  </div>

                </div>
              </div>

              <div class="sign" v-show="content.courseType=='4' && content.buyFlag">

                <div class="baoming-content">
                  <div class="baoming-button">
                    已报名
                  </div>
                </div>

              </div>

              <div class="main-online" v-show="content.courseType=='5'">
                <div class="online-course" v-for="(item,index) in content.educationCourseGroupDetailsList">
                  <div class="img-box">
                    <img :src="$axios.defaults.baseURL+item.photo" alt="">
                    <!-- <span class="status">{{item.courseTypeLabel}}</span> -->
                  </div>
                  <div class="right-box">
                    <div class="title-text">{{item.courseName}}</div>

                    <div class="button-box">
                      <div v-show="item.studyFlag && !item.completeFlag" class="start" @click="goPage('/dbcourse_content/'+item.courseId)">
                        马上学习</div>
                      <div v-show="item.studyFlag && item.completeFlag" class="start" @click="goPage('/dbcourse_content/'+item.courseId)">已完成
                      </div>
                      <div v-show="!item.studyFlag" class="start1" @click="getInfo">马上学习</div>
                    </div>
                  </div>


                  <div class="clear"></div>
                </div>
                <nodata v-show="content.educationCourseGroupDetailsList==null "></nodata>
              </div>


            </el-tab-pane>
            <el-tab-pane label="学员问答" v-if="content.pinglunFlag=='1'" name="third">
              <div class="taolun">
                <div class="text-main">
                  <el-input type="textarea" :rows="2" placeholder="说出你的观点吧" v-model="textarea" class="top-textarea">
                  </el-input>
                  <div class="button" @click="comment">提问</div>
                  <div class="submit-button" @click="comment">立即询问</div>
                  <div style="clear:both"></div>
                </div>
                <div class="taolun-content">
                  <div class="taolun-item" v-for="(item,index) in taoList">
                    <img :src="$axios.defaults.baseURL+item.userPhoto" alt="" class="man-img" />
                    <span class="name">{{item.userName}}</span>
                    <p class="content">{{item.content}}</p>
                    <div class="taolun-bottom">
                      <span class="time">{{item.createDate}}</span>
                      <div class="huifu">
                        <span class="text" @click="huifu(index,'1',item)">回复</span>
                        <!-- <img src="@/assets/images/huifu.png" alt="" @click="huifu(index,'1',item)"> -->
                      </div>
                    </div>
                    <div class="huifuList" v-show="item.childList">
                      <div class="huifu-item" v-for="(item1,index1) in item.childList" :class="item1.addClass">
                        <!-- <p class="content1" v-show="item1.businessName!=''">{{item1.userName}} 回复 {{item1.businessName}}：<span style="color:#222222">{{item1.content}}</span></p> -->
                        <p class="content1" v-show="item1.businessName!=''">{{item1.userName}}：<span
                            style="color:#222222">{{item1.content}}</span></p>
                        <p class="content1" v-show="item1.businessName==''">{{item1.userName}}：<span
                            style="color:#222222">{{item1.content}}</span></p>
                        <div class="huifu-bottom">
                          <span class="time1">{{item.createDate}}</span>
                          <div class="huifu">
                            <!-- <span class="text" @click="huifu(index,'2',item1)">回复</span> -->
                            <!-- <img src="@/assets/images/huifu.png" alt="" @click="huifu(index,'2',item1)"> -->
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="text-main1" v-show="item.show">
                      <el-input type="textarea" :rows="10" v-model="textarea1" :placeholder="message"></el-input>
                      <span class="hui" @click="comment(items,index,'1')">回复</span>
                    </div>
                    <div style="clear:both"></div>
                  </div>
                </div>
                <ui-pagination class="study-pagination" style="margin: 60px 0;" :total="total" @pageChange="pageChange"
                  :size="pageSize" v-show="taoList!=0"></ui-pagination>
                <nodata v-show="taoList.length==0 && start"></nodata>
              </div>

            </el-tab-pane>
            <el-tab-pane label="学员评价" v-if="content.pingfenFlag=='1'" name="fourth">
              <div class="ping-main">
                <div class="ping">
                  <span class="title1">课程评分：</span>
                  <el-rate v-model="number1" show-score text-color="#ff9900" score-template="{value}" class="rate-main">
                  </el-rate>
                </div>
                <div class="text-main">
                  <el-input type="textarea" :rows="2" placeholder="说出你的观点吧" v-model="textarea2" class="top-textarea">
                  </el-input>
                  <div class="button" @click="submit">提交</div>
                </div>
                <div class="pingList">
                  <div class="pingList-item" v-for="(item,index) in allPing" :class="item.addClass">
                    <img :src="$axios.defaults.baseURL+item.userPhoto" alt="">
                    <div class="ping-right">
                      <span class="man">{{item.userName}}</span>
                      <span class="time">{{item.createDate}}</span>
                      <p class="content">{{item.content}}</p>
                    </div>
                  </div>
                </div>
                <ui-pagination class="study-pagination" style="margin: 60px 0;" :total="total1"
                  @pageChange="pageChange1" :size="10" v-show="allPing.length!=0"></ui-pagination>
                <nodata v-show="allPing.length==0 && start"></nodata>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程资料" name="five">
              <div class="mulumain">
                <div class="mulu-item " style="height:60px;" v-for="(item,index) in muluList3">
                  <span class="text2">课程资料</span>
                  <span class="name2">{{item.title}}</span>
                  <div class="bofang" style="top:15px;"><a :href="$axios.defaults.baseURL+item.fileUrl" download
                      target="_blank">下载资料</a></div>
                </div>
                <nodata v-show="muluList3.length==0 && start" style="background:#ffffff"></nodata>
              </div>
            </el-tab-pane>

          </el-tabs>
        </div>

        <div class="content-left" v-show="content.courseType=='3'">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程概览" name="first" style="background:#ffffff;width:100%;float:left;">
              <div class="course-text" v-html="content.description">

              </div>
              <nodata v-show="content.description=='' && start"></nodata>
            </el-tab-pane>

            <el-tab-pane label="学员问答" v-if="content.pinglunFlag=='1'" name="third">
              <div class="taolun">
                <div class="text-main">
                  <el-input type="textarea" :rows="2" placeholder="说出你的观点吧" v-model="textarea" class="top-textarea">
                  </el-input>
                  <div class="button" @click="comment">提问</div>
                  <div class="submit-button" @click="comment">立即询问</div>
                  <div style="clear:both"></div>
                </div>
                <div class="taolun-content">
                  <div class="taolun-item" v-for="(item,index) in taoList">
                    <img :src="$axios.defaults.baseURL+item.userPhoto" alt="" class="man-img" />
                    <span class="name">{{item.userName}}</span>
                    <p class="content">{{item.content}}</p>
                    <div class="taolun-bottom">
                      <span class="time">{{item.createDate}}</span>
                      <div class="huifu">
                        <span class="text" @click="huifu(index,'1',item)">回复</span>
                        <!-- <img src="@/assets/images/huifu.png" alt="" @click="huifu(index,'1',item)"> -->
                      </div>
                    </div>
                    <div class="huifuList" v-show="item.childList">
                      <div class="huifu-item" v-for="(item1,index1) in item.childList" :class="item1.addClass">
                        <!-- <p class="content1" v-show="item1.businessName!=''">{{item1.userName}} 回复 {{item1.businessName}}：<span style="color:#222222">{{item1.content}}</span></p> -->
                        <p class="content1" v-show="item1.businessName!=''">{{item1.userName}}：<span
                            style="color:#222222">{{item1.content}}</span></p>
                        <p class="content1" v-show="item1.businessName==''">{{item1.userName}}：<span
                            style="color:#222222">{{item1.content}}</span></p>
                        <div class="huifu-bottom">
                          <span class="time1">{{item.createDate}}</span>
                          <div class="huifu">
                            <!-- <span class="text" @click="huifu(index,'2',item1)">回复</span> -->
                            <!-- <img src="@/assets/images/huifu.png" alt="" @click="huifu(index,'2',item1)"> -->
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="text-main1" v-show="item.show">
                      <el-input type="textarea" :rows="10" v-model="textarea1" :placeholder="message"></el-input>
                      <span class="hui" @click="comment(items,index,'1')">回复</span>
                    </div>
                    <div style="clear:both"></div>
                  </div>
                </div>
                <ui-pagination class="study-pagination" style="margin: 60px 0;" :total="total" @pageChange="pageChange"
                  :size="pageSize" v-show="taoList!=0"></ui-pagination>
                <nodata v-show="taoList.length==0 && start"></nodata>
              </div>

            </el-tab-pane>
            <el-tab-pane label="学员评价" v-if="content.pingfenFlag=='1'" name="fourth">
              <div class="ping-main">
                <div class="ping">
                  <span class="title1">课程评分：</span>
                  <el-rate v-model="number1" show-score text-color="#ff9900" score-template="{value}" class="rate-main">
                  </el-rate>
                </div>
                <div class="text-main">
                  <el-input type="textarea" :rows="2" placeholder="说出你的观点吧" v-model="textarea2" class="top-textarea">
                  </el-input>
                  <div class="button" @click="submit">提交</div>
                </div>
                <div class="pingList">
                  <div class="pingList-item" v-for="(item,index) in allPing" :class="item.addClass">
                    <img :src="$axios.defaults.baseURL+item.userPhoto" alt="">
                    <div class="ping-right">
                      <span class="man">{{item.userName}}</span>
                      <span class="time">{{item.createDate}}</span>
                      <p class="content">{{item.content}}</p>
                    </div>
                  </div>
                </div>
                <ui-pagination class="study-pagination" style="margin: 60px 0;" :total="total1"
                  @pageChange="pageChange1" :size="10" v-show="allPing.length!=0"></ui-pagination>
                <nodata v-show="allPing.length==0 && start"></nodata>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程资料" name="five">
              <div class="mulumain">
                <div class="mulu-item " style="height:60px;" v-for="(item,index) in muluList3">
                  <span class="text2">课程资料</span>
                  <span class="name2">{{item.title}}</span>
                  <div class="bofang" style="top:15px;"><a :href="$axios.defaults.baseURL+item.fileUrl" download
                      target="_blank">下载资料</a></div>
                </div>
                <nodata v-show="muluList3.length==0 && start" style="background:#ffffff"></nodata>
              </div>
            </el-tab-pane>

          </el-tabs>
        </div>


        <div class="content-right">
          <h3 class="title">热门课程</h3>
          <div class="hot-all">
            <div class="hot-item" v-for="(item,idnex) in courseList" @click="goContent(item)">
              <img :src="$axios.defaults.baseURL+item.photo" alt="">
              <span class="name">{{item.title}}</span>
              <span class="price" v-show="Number(item.presentPrice)!=0">￥{{item.presentPrice}}</span>
              <span class="price" v-show="Number(item.presentPrice)==0">免费</span>
            </div>
            <!-- <nodata v-show="courseList.length==0" style="background:#ffffff"></nodata> -->
            <div v-show="courseList.length==0" style="width: 100%;height: 30px;line-height: 30px;text-align: center;margin-bottom: 15px;">暂无数据</div>
          </div>
        </div>
      </div>
      <div style="clear:both"></div>
    </div>
  </section>
</template>

<script>
  import Pagination from '@/components/pagination.vue'
  import Cookies from 'js-cookie'
  import {
    Notification,
    Message,
  } from 'element-ui';
  import nodata from '@/components/nodata.vue'
  import 'babel-polyfill'
  import $ from "jquery"
  import Vue from "vue";


  export default {
    components: {
      'ui-pagination': Pagination,
      nodata
    },
    props: {

    },
    data() {
      return {
        istudy: 0,
        zero: 0,
        cjindu: 0,
        kechengid: '',
        loading: false,
        isColl: false,
        isBuy: false,
        buttonTitle: '',
        menuName: '',
        path: '',
        start: false,
        html: "",
        data: 4.5,
        reverse: false,
        options: [{
          value: '1',
          label: '男'
        }, {
          value: '2',
          label: '女'
        }],
        value: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        newsList: [],
        total: 0,
        total1: 0,
        activeName: 'first',
        textarea2: '',
        textarea: '',
        textarea1: '',
        id: "",
        message: "",
        isTree: false,
        taoList: [{
          userName: '刘老师',
          content: '当micro：bit遇上Li：bit时激光切割：激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案--突来的创意须被即时的创造。',
          time: '2019-08-08 12:15:36',
          show: false,
          childList: [{
              name1: '刘老师',
              name2: '马老师',
              content: '激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案.',
              time: '2019-08-08 12:15:36'
            },
            {
              name1: '刘老师',
              name2: '马老师',
              content: '激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案.激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案',
              time: '2019-08-08 12:15:36'
            },
            {
              name1: '刘老师',
              name2: '马老师',
              content: '激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案.',
              time: '2019-08-08 12:15:36',
              addClass: 'no-border'
            },
          ],
        }, ],
        pptList:[],
        muluList1: [

        ],
        muluList2: [],
        muluList3: [],
        number: 4,
        content: {
          educationTeacher: {},
        },
        activeIndex1: '0',
        activeIndex2: '0',
        items: {},
        activeIndex3: '0',
        saiList: [{
            name: '更新时间'
          },
          {
            name: '浏览量'
          },
          {
            name: '学习人数'
          },
        ],
        label: '',
        pageSize: 6,
        testList: [],
        courseList: [

        ],
        courseType: null,
        number1: 5,
        allPing: [],
        pageNo: 1,
        pageNo1: 1,
        vip: false,
        login: false,
        videoList: [],
        countObj: {
          detailsCount: 1,
          studyCount: 0
        },
        nextTitle: '没有了',
        text: '开始学习'
      }
    },
    head() {
        return {
          title: '课程详情',
        }
    },
    watch: {
      // 利用watch方法检测路由变化：
      '$route': function(to, from) {
        console.log(to.path, 8888888888)
        console.log(from.path, 7777777777)
        //拿到目标参数 to.query.id 去再次请求数据接口
        // if(to.path!='/index'){
        //   this.kechengid = this.$route.params.id
        //   if(this.kechengid!=undefined){

        //       this.getData();
        //   }
        // }
        let path = to.path;
        let arr = path.split("/");
        console.log(arr, 222)
        if (arr[1] == 'dbcourse_content') {
          this.kechengid = this.$route.params.id
          if (this.kechengid != undefined) {
            this.getData();
          }
        }
      }
    },
    computed: {

    },

    mounted() {
      $('.el-scrollbar__wrap').animate({
        scrollTop: '0px'
      }, 0);
      // window["getBpageList"] = () => {
      //       this.getData();
      // };
    },
    created() {
      this.kechengid = this.$route.params.id
      this.getData();
      if (Cookies.get("token")) {
        this.login = true;
      }
      //this.getCom();

      // this.getRecom();

      // this.addCenter();
    },
    methods: {
      //提醒报名
      getInfo(){
        Notification.warning({
          title: '提示',
          message: '请点击上方开始学习按钮报名'
        })
      },
      goPage(url) {
        // console.log(8888,url)
        this.$router.push(url);
      },
      goTest(item) {
        if (!Cookies.get("token")) {
          this.$router.push("/login");
          return;
        }
        else{
          // this.$router.push('/paper/' + this.kechengid + '/' + item.educationPaperList[0].id + "/" + item.did);
          var routeData = this.$router.resolve({
            path: '/paper/' + this.kechengid + '/' + item.educationPaperList[0].id + "/" + item.did
          });
          window.open(routeData.href, '_blank');

          // let routeData = this.$router.resolve({
          //     name: url,
          //     query:{kaoshiId:item.kaoshiId,id:item.id,examName:item.educationKaoshi.name},
          // });
         }
      },
      sign() {
        if (!Cookies.get('token')) {
          Notification.warning({
            title: '提示',
            message: "请先登录"
          })
          return;
        }
        if (this.input2 == "" || this.input3 == "" || this.value == "") {
          Notification.warning({
            title: '提示',
            message: "请输入完整的信息"
          })
          return;
        } else {
          if (this.input3 != "") {
            if (!(/^1[3456789]\d{9}$/.test(this.input3))) {
              Notification.warning({
                title: '提示',
                message: "请输入正确的手机号"
              })
              return;
            }
          }
          if (Number(this.content.presentPrice) == 0) {
            var that = this;
            this.$axios.$post("/f/addFreeOrder?buyId=" + this.kechengid + "&buyType=" + this.content.courseType +
                "&msCard=" + this.input5 + "&msMobile=" + this.input3 + "&msName=" + this.input2 + "&msSex=" + this
                .value)
              .then(function(response) {
                Notification.success({
                  title: '提示',
                  message: "您已成功报名该面授课程，在学习中心可以查看该课程"
                })
                that.getData();
                that.input5 = "";
                that.input2 = "";
                that.input3 = "";
                that.value = "";
              })
              .catch(function(error) {
                // handle error
                console.log(error);
              })
          } else {
            Cookies.set("m-name", this.input2);
            Cookies.set("m-sex", this.value);
            Cookies.set("m-mobile", this.input3);
            Cookies.set("m-no", this.input5);
            this.$router.push("/order/" + this.kechengid)
          }

        }
      },
      goStudy() {
        if (this.nextTitle == "没有了") {
          return;
        }
        if (!this.content.buyFlag && !this.content.isTree) {
          this.buyCourse();
          return;
        }

        let a = this.countObj.studyCount;
        if (a < this.muluList1.length) {
          this.goSee(this.muluList1[a]);
        } else {
          this.goSee(this.muluList1[this.muluList1.length - 1]);
        }
      },
      gotoPPT(){
        if (!Cookies.get("token")) {
          this.$router.push("/login");
          return;
        };
        let detailId = this.content.courseInfo.educationCoursePptDetailsList[0].id
        let id = this.content.course.courseId
        //跳转到ppt学习界面，将ppt文件地址带过去
        // this.$router.push("/pptCourse/");
        this.$router.push('/ppt_course/' + id + '/' + detailId)

        // this.$router.push({
        //   path:"/pptCourse",
        //   query:{
        //     id:id
        //   }
        // });
      },
      addXuexi() {
        if (!Cookies.get("token")) {
          this.$router.push("/login");
          return;
        };
        var that = this;
        this.$axios.$get("/f/addStudyCenter?courseId=" + this.content.courseId + "&courseType=" + this.content
            .courseType)
          .then(function(response) {
            if (response.success) {
              that.content.buyFlag = true;
              that.content.educationCourseGroupDetailsList[0].studyFlag = true;
              that.$confirm('您已成功报名该套餐课程，在学习中心可以查看该课程', '提示', {
                // cancelButtonText:'取消',
                confirmButtonText: '确定',
                showCancelButton: false,
                showClose: true,
                // closeOnClickModal:true,
                type: 'warning'
              }).then(() => {
              }).catch(() => {

              });
            }


          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      see() {
        if ((this.courseType == "1" || this.courseType == "5") && this.muluList1.length == 0) {
          return;
        }
        if (!Cookies.get("token")) {
          this.$router.push("/login");
          return;
        }
        console.log(this.content)
        if (this.content.courseType == '3') {
          var routeData = this.$router.resolve({
            path: "/live/" + this.content.channelNo
          });
          window.open(routeData.href, '_blank');
          return;
        }

        var index = this.countObj.studyCount;
        if (index >= this.muluList1.length) {
          index = this.muluList1.length - 1;
        }

        var obj = this.muluList1[index];
        console.log(obj, 1111111111111111111111111)
        console.log(obj.testObj, 2222222222)
        if (obj.detailType == "1") {
          // 跳转视频观看页面
          // this.$router.push('/play/' + this.kechengid + "/" + obj.id);
          var routeData = this.$router.resolve({
            path: '/play/' + this.kechengid + "/" + obj.id
          });
          window.open(routeData.href, '_blank');
        } else if (obj.detailType == "2") {
          // 跳转试卷测试页面
          var routeData = this.$router.resolve({
            path: '/paper/' + this.kechengid + "/" + obj.testObj.id + "/" + obj.did
          });
          window.open(routeData.href, '_blank');
          // this.$router.push('/paper/' + this.kechengid + "/" + obj.testObj.id + "/" + obj.did);
        }


        // if(this.content.buyFlag){
        //   Cookies.set("seeType","yes");
        // }
        // else if(!this.content.buyFlag && this.content.auditionFlag=="1"){
        //   Cookies.set("seeType","no");
        //   Cookies.set("time",this.content.auditionTimes);
        // }
        // var routeData = this.$router.resolve({ path: "/play"});
        // window.open(routeData.href, '_blank');
      },
      buyCourse() {
        // if(!Cookies.get("token")){
        //   this.$router.push("/login/student");
        //   return;
        // }
        // if((this.content.courseVipType=="2" || this.content.courseVipType=="1") && !this.vip){
        //   this.$confirm('您还未开通会员，请先开通会员?', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   }).then(() => {
        //     this.$router.push("/main/vip");

        //   }).catch(() => {

        //   });
        //   return;
        // }
        // Cookies.set("courseType",this.content.courseType);
        this.$router.push("/order/" + this.kechengid);
      },
      //跳转到ppt播放页面
      goPPT(item) {
        if (!Cookies.get("token")) {
          this.$router.push("/login");
          return;
        }
        if (this.content.buyFlag) {
          Cookies.set("seeType", "yes");
        }
        // this.$router.push('/ppt_course/' + this.kechengid + '/' + item.educationDoc.id)
        var routeData = this.$router.resolve({
          path: '/ppt_course/' + this.kechengid + '/' + item.id
        });
        window.open(routeData.href, '_blank');
      },
      goSee(item) {
        if (!Cookies.get("token")) {
          this.$router.push("/login");
          return;
        }
        if (this.content.buyFlag) {
          Cookies.set("seeType", "yes");
        }
        // else if(!this.content.buyFlag && this.content.auditionFlag=="1"){
        //   Cookies.set("seeType","no");
        //   Cookies.set("time",this.content.auditionTimes);
        // }
        // else if(!this.content.buyFlag && this.content.auditionFlag=="0"){
        //     Message.warning({
        //       title:'提示',
        //       message:"请先报名购买课程"
        //     });
        //     return;
        // }

        if (item.detailType == '1') {
          console.log(item,222222)
          // this.$router.push('/play/' + this.kechengid + "/" + item.id)
          var routeData = this.$router.resolve({
            path: '/play/' + this.kechengid + "/" + item.id
          });
          window.open(routeData.href, '_blank');
        } else {
          // this.$router.push('/paper/' + this.kechengid + "/" + item.testObj.id + "/" + item.did);
          var routeData = this.$router.resolve({
            path: '/paper/' + this.kechengid + "/" + item.testObj.id + "/" + item.did
          });
          window.open(routeData.href, '_blank');
        }

        // var routeData = this.$router.resolve({ path: '/play/'+this.$route.params.id+"/"+item.id});
        // window.open(routeData.href, '_blank');
      },
      pay() {
        if (!Cookies.get("type")) {
          this.$router.push("/mainAll/login");
          return;
        }
        if (this.content.auditionFlag == "1") {
          Cookies.set("seeType", "no");
          var routeData = this.$router.resolve({
            path: "/see/" + this.kechengid + "/0"
          });
          window.open(routeData.href, '_blank');
          return;
        }
        var that = this;
        this.$axios.$post("http://seed.ckwashington.com/admin/mini/order/addCourseOrder?courseId=" + this.kechengid +
            "&type=1&number=1")
          .then(function(response) {
            that.$router.push("/mainAll/courseOrder/" + response.data.id)
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      pageChange1(index) {
        this.pageNo1 = index;
        this.getList();
      },
      getList() {
        var that = this;
        this.$axios.$get("/f/pagePingFen?rootCourseId=" + this.kechengid + "&courseType=" + this.content.courseType +
            "&pageNo=" + this.pageNo1 + "&pageSize=10")
          .then(function(response) {
            var data = response.data;
            var len = data.length;
            if (len != 0) {
              that.total1 = response.count;
              // for(var i=0;i<len;i++){
              //   data[i].photo = "http://seed.ckwashington.com/admin" + data[i].photo;
              // }
              data[len - 1].addClass = "no-border";
              that.allPing = data;
            }

          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      submit() {
        if (!Cookies.get("token")) {
          this.$router.push("/login");
          return;
        }
        if (this.textarea2 == "") {
          Notification.warning({
            title: '提示',
            message: "请输入内容"
          })
          return;
        }
        var that = this;
        this.$axios.$post("/f/addPingFen?rootCourseId=" + this.kechengid + "&score=" + this.number1 + "&content=" + this
            .textarea2 + "&courseType=" + this.content.courseType + "&courseId=" + this.content.id)
          .then(function(response) {
            Notification.success({
              title: '提示',
              message: "已提交"
            });
            that.getList();
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      setZan() {
        if (!Cookies.get("token")) {
          this.$router.push("/login/student");
          return;
        }
        var that = this;
        this.$axios.$post("http://www.jzcqedu.com:8080/f/common/addZan?type=1&id=" + this.kechengid)
          .then(function(response) {
            if (!that.content.zan) {
              that.content.zan = true;
              Notification.success({
                title: '提示',
                message: "已点赞"
              })
            } else {
              that.content.zan = false;
              Notification.success({
                title: '提示',
                message: "取消点赞"
              })
            }
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      collect() {
        if (!Cookies.get("token")) {
          this.$router.push("/login");
          return;
        }
        var that = this;
        this.$axios.$post("/f/collectionCourse?rootCourseId=" + this.kechengid)
          .then(function(response) {
            if (!that.content.collection) {
              that.content.collection = true;
              Notification.success({
                title: '提示',
                message: "收藏成功"
              })
            } else {
              that.content.collection = false;
              Notification.success({
                title: '提示',
                message: "已取消收藏"
              })
            }
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      pageChange(index) {
        this.pageNo = index;
        this.getCom();
      },
      huifu(index, type, item) {

        if (type == "1") {
          this.id = item.id;
        } else {
          this.id = this.taoList[index].id;
        }
        this.message = "回复" + item.userName;
        var len = this.taoList.length;
        for (var i = 0; i < len; i++) {
          if (i == index) {
            this.taoList[i].show = true;
          } else {
            this.taoList[i].show = false;
          }
        }
        var item = item;
        item.type = type;
        this.items = item;
      },
      test(item) {
        this.$router.push("/mainAll/test/" + item.paperId);
      },
      handleSelect1(key, keyPath) {

      },
      handleSelect2(key, keyPath) {

      },
      goContent(item) {
        if (item.privateId != this.kechengid) {
          this.loading = true;
        }

        setTimeout(() => {
          this.$router.push("/dbcourse_content/" + item.privateId)
        }, 500)

      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      comment(item, index, type) {

        if (!Cookies.get("token")) {
          this.$router.push("/login");
          return;
        }
        if (type) {
          if (this.textarea1 == "") {
            Notification.warning({
              title: '提示',
              message: "请输入评论内容"
            })
            return;
          }
          if (item.type == "1") {
            var data = {
              content: this.textarea1,
              id: this.kechengid,
              type: "1",
              parentId: item.id
            }
          } else {
            var data = {
              content: this.textarea1,
              id: this.kechengid,
              courseType: this.content.courseType,
              parentId: this.id
            }
          }

        } else {
          if (this.textarea == "") {
            Notification.warning({
              title: '提示',
              message: "请输入评论内容"
            })
            return;
          }
          var data = {
            content: this.textarea,
            id: this.kechengid,
            courseType: this.content.courseType,
            parentId: "0"
          }
        }
        var that = this;
        this.$axios.$post("/f/addCourseContent?rootCourseId=" + data.id + "&content=" + data.content + "&courseType=" +
            this.content.courseType + "&parentId=" + data.parentId)
          .then(function(response) {
            Message.success({
              title: '提示',
              message: "已提交"
            })
            if (that.pageNo == 1) {
              that.getcomment();
            }
            if (type) {
              that.textarea1 = "";
              if (index || index == 0) {
                var obj = {};
                obj.userName = Cookies.get("mobile");
                obj.businessName = "";
                obj.content = data.content;
                obj.createDate = response.data.createDate;
                that.taoList[index].educationContentList.unshift(obj);
                var len1 = that.taoList[index].educationContentList.length;
                that.taoList[index].educationContentList[len1 - 1].addClass = "no-border";
              }
            } else {
              that.textarea = "";
            }

          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      getcomment() {
        var that = this;
        this.$axios.$get("/f/pageCourseContent?rootCourseId=" + this.kechengid + "&pageNo=" + this.pageNo +
            "&pageSize=10" + "&courseType=" + this.content.courseType)
          .then(function(response) {
            var data = response.data;
            that.total = response.count;
            var len = data.length;
            if (len != 0) {
              for (var i = 0; i < len; i++) {
                data[i].show = false;
                if (data[i].childList) {
                  var len1 = data[i].childList.length;
                  data[i].childList[len1 - 1].addClass = "no-border";
                }
              }
            }

            that.taoList = data;
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      addCenter() {
        if (!Cookies.get("type")) {
          return;
        }
        this.$axios.$post("http://seed.ckwashington.com/admin/mini/video/addCourseStudyRecord?f=" + this.kechengid +
            "&type=1")
          .then(function(response) {})
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      addCollect(item) {
        var that = this;
        this.$axios.$post("http://seed.ckwashington.com/admin/mini/video/addCollection?courseId=" + item.id + "&type=1")
          .then(function(response) {
            Notification.success({
              title: '提示',
              message: "已提交"
            })
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      getCom() {
        var that = this;
        this.$axios.$post("http://www.jzcqedu.com:8080/f/common/getContent?type=1" + "&id=" + this.kechengid +
            "&pageNo=" + this.pageNo + "&pageSize=" + this.pageSize)
          .then(function(response) {
            let list = response.data;
            list.forEach((item, i) => {
              item.show = false;
              item.userPhoto = "http://www.jzcqedu.com:8080" + item.userPhoto
            })
            that.taoList = list;
            that.total = response.count;
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      formatSeconds(value) {
        let result = parseInt(value)
        let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
        let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 %
          60))
        let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
        result = `${h}:${m}:${s}`
        return result
      },
      getData() {
        var that = this;
        this.loading = true;
        this.$axios.$post("/f/course?id=" + this.kechengid)
          .then(function(response) {
            that.loading = false;
            that.start = true;
            let docList = response.data.course.educationDocList;
            let data = Object.assign(response.data.course, response.data.course.courseInfo, response.data);

            that.courseType = data.courseType;
            if (data.courseType == '1') {
              that.path = '/dbcourse';
              that.menuName = '点播课程';
            } else if (data.courseType == '3') {
              that.path = '/online';
              that.menuName = '直播课程';
            } else if (data.courseType == '4') {
              that.path = '/face_course';
              that.menuName = '面授课程';
            } else if (data.courseType == '5') {
              that.path = '/meal_course';
              that.menuName = '套餐课程';
            } else if (data.courseType == '2') {
              that.path = '/face_course';
              that.menuName = '阿里云直播';
            }else if (data.courseType == '6') {
              that.path = '/ppt';
              that.menuName = 'PPT课程';
            }


            if (Cookies.get("token")) {
              let countObj = response.data.userStudyHoursMap;
              if (countObj.studyCount && countObj.detailsCount != 0) {
                countObj.jindu = Math.ceil((countObj.studyCount / countObj.detailsCount) * 100)
                that.cjindu = Math.ceil((countObj.studyCount / countObj.detailsCount) * 100)
              } else {
                countObj.jindu = 0;
                countObj.studyCount = 0;
                that.cjindu = 0;
              }

              that.countObj = countObj;
            }
            if (Cookies.get("token")) {
              data.show = true;
            }
            // let data = response.data.educationVideo;
            // that.vip = response.data.vip;
            // data.photo = "http://www.jzcqedu.com:8080"+data.photo;

            // if(data.score==""){
            //   data.score=0
            // }
            // else{
            //   data.score = Number(data.score)
            // }
            // data.buy = response.data.buy;
            // data.coll = response.data.coll;
            // data.zan = response.data.zan;
            if (Number(data.presentPrice) == 0) {
              data.isTree = true;
            }
            if (data.courseType == "1" || data.courseType == "5" || data.courseType == "6") {
              that.label = "课程目录"
            } else if (data.courseType == "4") {
              that.label = "课程报名"
            }
            that.content = data;
            console.log(that.content,66666666666666666)
            that.getcomment();
            that.getList();
            // that.content = data;

            let hot = response.data.courseDbRecDTOList;
            if (hot.length != 0) {
              let arr = [];
              hot.forEach((item, i) => {
                if (i < 4) {
                  item = Object.assign(item, item.courseInfo);
                  arr.push(item)
                }

              });
              that.courseList = arr;
            } else {
              that.courseList = [];
            }


            let doc = docList;
            // console.log(doc)
            if (doc.length != 0) {
              let arr1 = [];
              doc.forEach((item, i) => {
                //item.files = "http://www.jzcqedu.com:8080"+item.files;
                arr1.push(item);
              });
              that.muluList3 = arr1;
            }

            if(data.educationCoursePptDetailsList){
              that.pptList = data.educationCoursePptDetailsList
            }

            let detail = data.educationCourseDbDetailsList;
            let b = [];
            if (detail) {
              if (detail.length != 0) {
                let arr2 = [];
                let arr5 = [];

                detail.forEach((item, i) => {
                  if (item.educationPaperList.length != 0) {
                    b.push(item.educationPaperList[0])
                  }
                  let itemId = item.id;
                  item = Object.assign(item, item.educationVideo)
                  item.id = itemId;
                  item.study = 0;
                  if(item.videoTime){
                    item.timeTesx = that.formatSeconds(item.videoTime)
                  }else{
                    item.timeTesx = ''
                  }
                  if (that.login) {
                    let a = item.userStudyTime;
                    if (a >= item.videoTime) {
                      a = item.videoTime
                    }
                    if(item.videoTime){
                      item.study = Math.ceil((a / item.videoTime) * 100);
                      that.istudy = Math.ceil((a / item.videoTime) * 100);
                    }else{
                      item.study = 0
                      that.istudy = 0
                    }

                    if (item.educationPaperList.length != 0) {
                      item.testObj = item.educationPaperList[0];
                      item.testTitle = item.testObj.title;
                    }
                  }
                  if (item.detailType == "1") {
                    arr5.push(item);
                  }
                  arr2.push(item);
                });
                that.videoList = arr5;
                that.muluList1 = arr2;

                let len = arr2.length;
                if (that.muluList1[len - 1].studyFlag) {
                  that.isTest = true;
                } else {
                  that.isTest = false;
                }

                if (that.countObj.studyCount < arr2.length) {
                  that.nextTitle = arr2[that.countObj.studyCount].detailName;
                }

                if (that.countObj.studyCount == 0) {
                  that.text = "开始学习"
                } else {
                  that.text = "继续学习"
                }
              }
              that.testList = b;
            }

            console.log(that.muluList1, "that.muluList1");
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })

      }
    }
  }
</script>

<style lang="less" scoped>
  .clear{
    clear: both;
  }
  .movieContent-main {
    width: 100%;
    background: #f0f0f2;

    .study-pagination {
      width: 100%;
    }

    .el-timeline-item__wrapper {
      top: -8px;
    }

    .movieAll {
      width: 1250px !important;
      margin: 0 auto;

      .course-content1 {
        width: 100%;
        margin-top: 35px;
        margin-bottom: 35px;
        position: relative;
        float: left;

        .content-right {
          float: left;
          width: 280px;
          box-sizing: border-box;
          border: 1px solid #0076ca;

          .hot-all {
            width: 250px;
            margin: 0 auto;
          }

          .hot-item {
            width: 250px;
            margin-bottom: 15px;
            cursor: pointer;
            float: left;
            box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);

            img {
              width: 250px;
              height: 190px;
              display: block;
            }

            .name {
              width: 100%;
              display: block;
              line-height: 25px;
              margin-top: 10px;
              height: 25px;
              font-size: 18px;
              color: #222222;
              text-align: left;
              padding-left: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .price {
              width: 100%;
              display: block;
              line-height: 25px;
              margin-top: 5px;
              height: 25px;
              font-size: 22px;
              color: #ef5924;
              text-align: left;
              margin-bottom: 5px;
              padding-left: 10px;
              font-weight: 500;
            }
          }

          .title {
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            color: #ffffff;
            background: #0076ca;
            margin-bottom: 15px;
          }
        }

        .content-left {
          width: 950px !important;
          float: left;
          margin-right: 20px;

          .course-text {
            width: 100%;
            background: #ffffff;
            padding: 30px;
            box-sizing: border-box;
            font-size: 16px;
            color: #444444;

            img {
              max-width: 100%;
            }
          }

          .el-tabs__content {
            .taolun {
              width: 100%;
              border-radius: 10px;
              padding: 0 40px;
              padding-top: 20px;
              padding-bottom: 40px;
              background: #ffffff;

              .taolun-content {
                width: 100%;
                padding: 0 35px;

                .taolun-item {
                  width: 100%;
                  margin-bottom: 15px;
                  border-top: 1px dashed #d2d2d2;
                  text-align: left;

                  .man-img {
                    float: left;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    display: block;
                    margin-right: 10px;
                    margin-top: 10px;
                  }

                  .name {
                    width: calc(100% - 50px);
                    display: block;
                    line-height: 40px;
                    margin-top: 10px;
                    font-size: 18px;
                    color: #222222;
                    float: left;
                    font-weight: 600;
                  }

                  .content {
                    width: 100%;
                    display: block;
                    line-height: 25px;
                    margin-top: 6px;
                    font-size: 16px;
                    color: #222222;
                    float: left;
                  }

                  .huifuList {
                    width: 100%;
                    margin-top: 15px;
                    background: #f7f7f7;
                    border: 1px solid #d2d2d2;
                    border-radius: 2px;
                    padding: 10px 15px;
                    float: left;

                    .no-border {
                      border: 0 !important;
                      margin-bottom: 0 !important;
                    }

                    .huifu-item {
                      width: 100%;
                      border-bottom: 1px dashed #d2d2d2;
                      margin-bottom: 12px;

                      .content1 {
                        line-height: 25px;
                        font-size: 16px;
                        color: #888888;
                      }

                      .huifu-bottom {
                        width: 100%;
                        height: 25px;
                        margin-bottom: 5px;
                        margin-top: 5px;

                        .huifu {
                          float: right;
                          height: 100%;

                          .text {
                            line-height: 25px;
                            font-size: 14px;
                            color: #888888;
                            margin-right: 7px;
                            float: left;
                            cursor: pointer;
                          }

                          img {
                            width: 24px;
                            height: 15px;
                            display: block;
                            cursor: pointer;
                            margin-top: 6px;
                            float: left;
                          }
                        }

                        .time1 {
                          line-height: 25px;
                          font-size: 16px;
                          color: #888888;
                        }
                      }
                    }

                    .huifu-item:last-child {
                      border-bottom: 0
                    }
                  }

                  .text-main1 {
                    width: 100%;
                    margin-top: 15px;
                    position: relative;
                    float: left;

                    .hui {
                      color: #888888;
                      font-size: 14px;
                      cursor: pointer;
                      position: absolute;
                      right: 7px;
                      bottom: 7px;
                    }

                    img {
                      width: 21px;
                      height: 21px;
                      display: block;
                      position: absolute;
                      right: 7px;
                      bottom: 7px;
                      cursor: pointer;
                    }

                    textarea {
                      resize: none;
                      height: 60px;
                      line-height: 20px;
                      padding: 10px 15px;
                      background: #f7f7f7;
                      border: 1px solid #d2d2d2;
                      border-radius: 2px;
                      overflow: hidden;
                    }
                  }

                  .taolun-bottom {
                    width: 100%;
                    margin-top: 6px;
                    height: 25px;
                    float: left;

                    .huifu {
                      float: right;
                      height: 100%;
                      margin-right: 15px;

                      .text {
                        line-height: 25px;
                        font-size: 14px;
                        color: #888888;
                        margin-right: 7px;
                        float: left;
                        cursor: pointer;
                      }

                      img {
                        width: 24px;
                        height: 15px;
                        display: block;
                        cursor: pointer;
                        margin-top: 6px;
                        float: left;
                      }
                    }

                    .time {
                      line-height: 25px;
                      font-size: 16px;
                      color: #888888;
                    }
                  }
                }
              }

              .text-main {
                width: 100%;
                position: relative;
                margin-bottom: 40px;
                margin-top: 30px;

                .button {
                  width: 65px;
                  height: 32px;
                  text-align: center;
                  line-height: 32px;
                  color: #6198fd;
                  font-size: 15px;
                  background: #f6f6f6;
                  cursor: pointer;
                  position: absolute;
                  right: 20px;
                  top: -40px;
                  border: 1px solid #6198fd;
                  border-bottom: 1;
                }

                .submit-button {
                  width: 100px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  color: #ffffff;
                  font-size: 14px;
                  border-radius: 3px;
                  cursor: pointer;
                  background: #6198fd;
                  margin: 20px 0;
                  float: right;
                }

                .top-textarea {
                  textarea {
                    resize: none;
                    height: 140px;
                    line-height: 20px;
                    padding: 15px 20px;
                    background: #f6f6f6;
                    border: 1px solid #6198fd;
                    border-radius: 4px;
                    overflow: hidden;

                  }

                  textarea::-webkit-input-placeholder {
                    color: #a0a0a0;
                    font-size: 16px;
                    font-weight: 600;
                  }
                }
              }

            }

            .ping-main {
              width: 100%;

              padding: 0 40px;
              padding-top: 20px;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              background: #fff;

              .pingList {
                width: 100%;

                .pingList-item {
                  width: 100%;
                  margin-bottom: 20px;
                  border-bottom: 1px dashed #d2d2d2;
                  float: left;
                  padding-bottom: 10px;

                  img {
                    width: 50px;
                    height: 50px;
                    display: block;
                    margin-right: 15px;
                    float: left;
                    border-radius: 50%;
                  }

                  .ping-right {
                    width: calc(100% - 65px);
                    float: right;

                    .man {
                      line-height: 40px;
                      float: left;
                      font-size: 16px;
                      color: #000000;
                    }

                    .time {
                      line-height: 40px;
                      float: right;
                      font-size: 14px;
                      color: #888888;
                    }

                    .content {
                      width: 100%;
                      float: left;
                      margin: 0px 0 15px 0;
                      line-height: 25px;
                      font-size: 16px;
                      text-align: left;
                      color: #000000;
                    }
                  }
                }
              }

              .text-main {
                width: 100%;
                position: relative;
                margin-bottom: 40px;

                .button {
                  width: 65px;
                  height: 32px;
                  text-align: center;
                  line-height: 32px;
                  color: #ffffff;
                  font-size: 15px;
                  background: #1676cc;
                  cursor: pointer;
                  position: absolute;
                  right: 10px;
                  bottom: 10px;
                }

                .top-textarea {
                  textarea {
                    resize: none;
                    height: 140px;
                    line-height: 20px;
                    padding: 15px 20px;
                    background: #f6f6f6;
                    border: 2px solid #1676cc;
                    border-radius: 8px;
                    overflow: hidden;
                  }

                  textarea::-webkit-input-placeholder {
                    color: #a0a0a0;
                    font-size: 16px;
                    font-weight: 600;
                  }
                }
              }

              .ping {
                height: 30px;
                margin: 0 auto;
                position: relative;
                margin-bottom: 40px;
                /deep/.el-rate__item{
                 vertical-align: text-top;
                }
                .title1 {
                  color: #1676cc;
                  float: left;
                  line-height: 30px;
                  font-size: 16px;
                }

                .rate-main {
                  float: left;
                  height: 30px;
                  line-height: 28px;
                  margin-right: 45px;

                  .el-rate__icon,
                  .el-rate__decimal {
                    line-height: 30px;
                    font-size: 22px;
                    margin-right: 4px;
                  }

                  .el-rate__text {
                    position: relative;
                    top: -2px;
                  }
                }

                .teacher {
                  float: left;
                  line-height: 30px;
                  color: #888888;
                  font-size: 16px;
                }
              }
            }

            .main-online {
              width: 100%;
              margin: 30px auto;
              box-sizing: border-box;
              border: 1px solid #ebebeb;
              border-radius: 3px;
              background: #ffffff;

              .online-course {
                width: 100%;
                box-sizing: border-box;
                border-bottom: 1px solid #ebebeb;
                padding: 15px;

                .right-box {
                  width: calc(100% - 230px);
                  float: right;
                  position: relative;
                  height: 112px;
                  display: flex;

                  .title-text {
                    width: 200px;
                    float: left;
                    line-height: 112px;
                    ;
                    font-size: 22px;
                    color: #555555;
                  }

                  .button-box {
                    cursor: pointer;
                    position: absolute;
                    right: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 200px;

                    .number {
                      width: 100%;
                      float: left;
                      height: 20px;

                      .iconfont {
                        float: right;
                        line-height: 20px;
                        display: block;
                        height: 20px;
                        font-size: 16px;

                      }

                      .iconfont:before {
                        margin-right: 5px;
                      }

                      .iconbofang2 {
                        color: #4c87f4;
                      }

                      .iconwodeicon {
                        color: #ff541e;
                        margin-left: 10px;
                      }
                    }

                    .start {
                      width: 120px;
                      height: 36px;
                      color: #fff;
                      line-height: 36px;
                      text-align: center;
                      border-radius: 3px;
                      background: #3a7bf3;
                      font-size: 16px;
                      display: block;
                      float: right;
                    }

                    .start1 {
                      width: 120px;
                      height: 36px;
                      color: #fff;
                      line-height: 36px;
                      text-align: center;
                      border-radius: 3px;
                      background: #d4bfca;
                      font-size: 16px;
                      display: block;
                      float: right;
                    }

                    .time {
                      line-height: 20px;
                      font-size: 14px;
                      color: #777777;
                      display: block;
                      margin: 15px 0;
                      float: left;
                      width: 100%;
                      text-align: right;
                    }
                  }

                  .rate-box {
                    width: 100%;

                    .num {
                      float: left;
                      line-height: 20px;
                      color: #555555;
                    }
                  }

                  .main-rate {
                    width: 125px;
                    float: left;

                    .el-rate__icon {
                      font-size: 22px;
                      margin-right: 2px;
                    }
                  }
                }

                .img-box {
                  width: 200px;
                  height: 112px;
                  float: left;
                  position: relative;
                  margin-right: 20px;

                  .status {
                    position: absolute;
                    right: 0;
                    padding: 6px 10px;
                    background: #3a7bf3;
                    top: 15px;
                    font-size: 14px;
                    color: #ffffff;
                  }

                  img {
                    width: 100%;
                    height: 100%;
                    display: block;

                  }
                }

              }

              .online-course:last-child {
                border: 0;
              }
            }

            .sign {
              width: 100%;
              margin-top: 0px;
              padding: 0 10px;
              background: #ffffff;
              position: relative;
              float: left;

              .baoming-content {
                margin: 0 auto;
                width: 450px !important;
                margin-bottom: 40px;

                .baoming-button {
                  width: 100%;
                  height: 50px;
                  cursor: pointer;
                  border-radius: 30px;
                  line-height: 50px;
                  text-align: center;
                  margin-bottom: 20px;
                  font-size: 18px;
                  color: #fff;
                  background: #0076ca;
                  box-shadow: 0 1px 12px #0076ca;
                  margin-top: 30px;
                }

                .baoming-input {
                  width: 100%;
                  height: 50px;
                  border: 1px solid #1676cc;
                  margin-bottom: 20px;
                  /deep/.el-scrollbar{
                    height: 80px !important;
                  }
                  .sex-select {
                    width: calc(100% - 110px) !important;
                    height: 100%;
                    float: left;

                    /deep/.el-input__inner{
                      height: 48px;
                      line-height: 48px;
                      border-radius: 0;

                    }


                    input {
                      border: 0;
                      height: 48px;
                      line-height: 48px;
                      font-size: 18px;
                      text-align: center;
                    }
                  }

                  .text-input {
                    width: calc(100% - 110px);
                    height: 100%;
                    float: left;
                    /deep/.el-input__inner{
                      height: 48px;
                      line-height: 48px;
                      border-radius: 0;
                    }
                    input {
                      border: 0;
                      height: 48px;
                      line-height: 48px;
                      font-size: 18px;
                    }
                  }

                  .name2 {
                    width: 110px;
                    height: 48px;
                    line-height: 48px;
                    text-align: center;
                    color: #fff;
                    font-size: 18px;
                    background: #1676cc;
                    float: left;
                    display: block;
                  }
                }

                .title {
                  margin-top: 20px;
                  margin-bottom: 20px;
                  width: 100%;
                  height: 50px;
                  line-height: 50px;
                  border: 1px solid #1676cc;
                  text-align: center;
                  font-size: 20px;
                  color: #1676cc;
                }

                .title-img {
                  width: 166px;
                  height: 42px;
                  display: block;
                }
              }

              .tishi {
                height: 20px;
                line-height: 20px;
                position: absolute;
                right: 10px;
                top: 0px;

                img {
                  width: 20px;
                  height: 20px;
                  display: block;
                  float: left;
                  margin-right: 5px;
                }

                .name {
                  line-height: 20px;
                  float: left;
                  font-size: 16px;
                  color: #1676cc;
                  font-weight: 600;
                }
              }
            }

            .catalog {
              width: 100%;
              box-sizing: border-box;
              padding: 20px 0px;
              background: #ffffff;
              margin-top: 20px;

              .test-item {
                width: 100%;
                display: flex;
                align-items: center;
                height: 60px;
                background: #fafafa;
                border-top: 1px solid #f3eeee;
                box-sizing: border-box;
                padding: 0 30px;
                position: relative;

                .text {
                  font-size: 15px;
                  color: #444444;
                  margin-right: 15px;
                }

                .iconfont {
                  font-size: 24px;
                  color: #2478d2;
                  margin-right: 15px;
                }

                .name1 {
                  font-size: 14px;
                  color: #888888;
                }

                .start {
                  width: 90px;
                  height: 40px;
                  border-radius: 5px;
                  border: 1px solid #ccc;
                  color: #666666;
                  text-align: center;
                  line-height: 38px;
                  position: absolute;
                  right: 30px;
                  font-size: 14px;
                  top: 10px;
                  cursor: pointer;
                }

                .noTest {
                  background: #a5a4a4 !important;
                  pointer-events: none;
                  color: #fff !important;
                  cursor: default !important;
                }
              }

              .course-item {
                width: 100%;
                box-sizing: border-box;

                img {
                  width: initial;
                  height: 170px;
                  display: block;
                }

                .line-main {
                  width: 100%;
                  background: #ffffff;
                  padding: 0 30px;
                  padding-top: 30px;
                  box-sizing: border-box;

                  .test-item {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    height: 60px;
                    background: #fafafa;
                    border-top: 1px solid #f3eeee;
                    box-sizing: border-box;
                    padding: 0 30px;
                    position: relative;

                    .text {
                      font-size: 15px;
                      color: #444444;
                      margin-right: 15px;
                    }

                    .iconfont {
                      font-size: 24px;
                      color: #2478d2;
                      margin-right: 15px;
                    }

                    .name1 {
                      font-size: 14px;
                      color: #888888;
                    }

                    .start {
                      width: 90px;
                      height: 40px;
                      border-radius: 5px;
                      border: 1px solid #ccc;
                      color: #666666;
                      text-align: center;
                      line-height: 38px;
                      position: absolute;
                      right: 30px;
                      top: 10px;
                      cursor: pointer;
                    }
                  }

                  /deep/.el-timeline-item__content {
                    position: relative;
                    height: 30px;
                  }

                  .name {
                    font-size: 14px;
                    color: #777777;
                    margin-right: 20px;
                    height: 30px;
                    line-height: 30px;
                    display: block;
                    float: left;
                  }

                  .right {
                    height: 30px;
                    float: left;
                    margin-left: 30px;
                    width: 300px;

                    .name1 {
                      line-height: 30px;
                      font-size: 15px;
                      color: #444444;
                      float: left;
                      width: 80px;
                    }

                    .el-progress {
                      width: calc(100% - 80px);
                      float: left;
                      line-height: 20px;
                      margin-top: 5px;
                    }
                  }

                  .main-name {
                    font-size: 14px;
                    color: #444444;
                    display: block;
                    width: 250px;
                    overflow: hidden;
                    height: 30px;
                    line-height: 30px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    float: left;
                  }
                  .main-name1 {
                    font-size: 14px;
                    color: #444444;
                    display: block;
                    width: 100px;
                    overflow: hidden;
                    height: 30px;
                    line-height: 30px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    float: left;
                    text-align: center;
                  }

                  .right-box {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    height: 30px;

                    .bofang {
                      width: 80px;
                      height: 30px;
                      float: right;
                      line-height: 30px;
                      border-radius: 5px;
                      text-align: center;
                      color: #ffffff;
                      font-size: 14px;
                      background: #0076ca;
                      position: relative;
                      cursor: pointer;

                      a {
                        display: block;
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        line-height: 30px;
                        color: #ffffff;
                        text-decoration: none;
                      }
                    }

                    .noClick {
                      background: #a5a4a4 !important;
                      cursor: not-allowed;
                      pointer-events: none
                    }

                    .time {
                      color: #666666;
                      font-size: 14px;
                      line-height: 30px;
                      margin-right: 20px;
                      float: left;

                    }

                    .time:before {
                      margin-right: 10px;
                      font-size: 20px;
                      color: #888888;
                      line-height: 30px;
                      float: left;
                    }

                    .see {
                      width: 70px;
                      height: 30px;
                      line-height: 30px;
                      text-align: center;
                      font-size: 14px;
                      color: #fff;
                      background: #0076ca;
                      border-radius: 4px;
                      cursor: pointer;
                    }
                  }
                }

                .top {
                  width: 100%;
                  height: 60px;
                  display: flex;
                  align-items: center;
                  background: #fafafa;
                  box-sizing: border-box;
                  padding: 0 30px;

                  .text {
                    font-size: 14px;
                    color: #888888;
                    margin-right: 30px;
                  }

                  .index {
                    display: block;
                    width: 25px;
                    height: 25px;
                    line-height: 23px;
                    text-align: center;
                    border-radius: 50%;
                    color: #888888;
                    font-size: 14px;
                    border: 1px solid #888888;
                    margin-right: 30px;
                  }

                  .name {
                    font-size: 14px;
                    color: #888888;
                  }
                }
              }

              .mu-title {
                width: 100%;
                padding: 0 30px;
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #f3eeee;
                font-size: 18px;
                color: #666666;

              }
            }

            .pre-box {
              width: 100%;
              height: 100px;
              background: #fff;
              display: flex;
              align-items: center;
              padding: 0 30px;
              box-sizing: border-box;

              .pre-main {
                width: 100%;

                .pre-bottom {
                  width: 100%;
                  height: 35px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;

                  .text,
                  .next {
                    font-size: 14px;
                    color: #888888;
                  }

                  .next {}

                }

                .pre-top {
                  width: 100%;
                  height: 35px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;

                  .study {
                    width: 100px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    font-size: 16px;
                    color: #fff;
                    background: #0076ca;
                    cursor: pointer;
                  }

                  .pre-jin {
                    width: calc(100% - 180px);
                  }
                }
              }
            }

            .mulumain {
              width: 100%;

              margin-top: 0;
              float: left;

              .mulu-item {
                width: calc(100% - 10px);
                margin: 0 5px;
                height: 60px;
                box-shadow: 0 1px 8px 0 rgba(210, 210, 210, 0.35);
                border-radius: 5px;
                margin-bottom: 25px;
                position: relative;
                background: #ffffff;

                .progress-top {
                  width: 100%;
                  height: 20px;
                  margin-top: 20px;
                  float: left;

                  .top-title {
                    line-height: 20px;
                    padding-left: 25px;
                    font-size: 18px;
                    color: #555555;
                    float: left;
                    display: block;
                    height: 20px;
                    width: 500px;
                    margin-right: 30px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }

                  .right {
                    height: 20px;
                    float: left;
                    width: 300px;

                    .name1 {
                      line-height: 20px;
                      font-size: 15px;
                      color: #444444;
                      float: left;
                      width: 80px;
                    }

                    .el-progress {
                      width: calc(100% - 80px);
                      float: left;
                      line-height: 20px;
                    }
                  }

                }

                .text {
                  width: 100%;
                  height: 20px;
                  line-height: 20px;
                  box-sizing: border-box;
                  padding-left: 25px;
                  margin-top: 20px;
                  font-size: 16px;
                  float: left;
                  display: block;
                }

                .text2 {

                  height: 20px;
                  line-height: 20px;
                  box-sizing: border-box;
                  padding-left: 25px;
                  margin-top: 20px;
                  font-size: 16px;
                  float: left;
                  display: block;
                }

                .bofang {
                  width: 80px;
                  height: 30px;
                  float: right;
                  line-height: 30px;
                  border-radius: 5px;
                  text-align: center;
                  color: #ffffff;
                  font-size: 14px;
                  background: #0076ca;
                  margin-right: 30px;
                  position: relative;
                  top: -4px;
                  cursor: pointer;

                  a {
                    display: block;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    line-height: 30px;
                    color: #ffffff;
                    text-decoration: none;
                  }
                }

                .ceshi {
                  background: #1676cc;
                }

                .dian {
                  width: 4px;
                  height: 4px;
                  margin-left: 15px;
                  margin-top: 28px;
                  margin-right: 15px;
                  display: block;
                  float: left;
                  background: #1676cc;
                }

                .name {
                  line-height: 60px;
                  float: left;
                  color: #555555;
                  font-size: 16px;
                  padding-left: 25px;
                }

                .name2 {
                  line-height: 60px;
                  float: left;
                  color: #555555;
                  font-size: 16px;
                  padding-left: 25px;
                }

                .man {
                  position: absolute;
                  right: 150px;
                  top: 55px;
                  line-height: 30px;
                  font-size: 14px;
                  display: block;
                  color: #ff541e;
                  display: block;

                  .text1 {
                    font-size: 14px;
                  }

                  .iconwodeicon:before {
                    margin-left: 5px;
                  }
                }

                .iconbofang2 {
                  font-size: 22px;
                  color: #aba4a4;
                }
              }
            }
          }

          .el-tabs__nav-wrap::after {
            display: none;
          }

          .el-tabs__nav-wrap {
            overflow: unset;

            .el-tabs__nav-scroll {
              overflow: unset;
            }
          }

          .el-tabs__item.is-active {
            padding: 0 15px;
            color: #fff;
            font-size: 16px;
            color: #0076ca;
            position: relative;
          }

          .el-tabs__item.is-active:after {
            width: 80%;
            height: 3px;
            content: '';
            background: #0076ca;
            position: absolute;
            right: 10%;
            bottom: 0;
          }

          .el-tabs__item {
            height: 58px;
            line-height: 58px;
            padding: 0 15px;
            font-size: 16px;
            margin-right: 30px;
            color: #444444;
          }

          .el-tabs__item:hover {
            color: #444444;
          }

          .el-tabs__header {
            height: 100px;
            background: #ffffff;
            padding: 0 30px;
            box-shadow: 0 10px 12px rgba(226, 226, 226, 0.5);
          }

          .el-tabs__active-bar {
            display: none;
          }
        }

        .content-right {}
      }

      .courser-top {
        width: 100%;
        height: 390px;
        background: #ffffff;
        padding: 35px;
        box-sizing: border-box;

        .course-main {
          width: 560px;
          height: 100%;
          float: left;
          margin-right: 40px;
        }

        .course-right {
          width: calc(100% - 600px);
          height: 100%;
          float: left;
          position: relative;

          .text {
            float: left;
            line-height: 45px;
            float: left;
            margin-top: 25px;
            color: #0076ca;
            font-size: 16px;
          }

          .title {
            text-align: left;
            margin-top: 15px;
            line-height: 30px;
            font-size: 24px;
            color: #222222;
            float: left;
            margin-right: 12px;
          }

          .vip-icon {
            width: 55px;
            height: 20px;
            margin-top: 35px;
            display: block;
            float: left;
          }

          .xin {
            position: absolute;
            height: 25px;
            right: -10px;
            top: 0px;

            .number {
              line-height: 25px;
              font-size: 14px;
              color: #888888;
              float: left;
              margin-right: 10px;
              cursor: pointer;
            }

            .iconzan1 {
              color: #d83c3c;
            }

            .iconxin {
              width: 25px;
              height: 25px;
              float: left;
              line-height: 25px;
              display: block;
              text-align: center;
              color: #888888;
              font-size: 30px;
              cursor: pointer;
            }

            .iconxin1 {
              color: #d83c3c;
            }
          }

          .nosee {
            background: #c3c0ca !important;
            cursor: not-allowed !important;
          }

          .mai {
            float: left;
            width: 150px;
            cursor: pointer;
            height: 45px;
            background-size: 100% 100%;
            line-height: 45px;
            text-align: center;
            font-size: 16px;
            color: #fff;
            background: #0076ca;
            margin-top: 25px;
            margin-right: 15px;
          }

          .see {
            float: left;
            width: 150px;
            cursor: pointer;
            height: 45px;
            background-size: 100% 100%;
            line-height: 45px;
            text-align: center;
            font-size: 16px;
            color: #fff;
            background: #f54337;
            margin-top: 25px;
          }

          .price {
            width: 100%;
            display: block;
            text-align: left;
            margin-top: 10px;
            line-height: 30px;
            height: 30px;
            color: #0076ca;
            font-size: 28px;
            float: left;
            font-weight: 600;

            .old-price {
              margin-left: 10px;
              font-size: 18px;
              font-weight: 500;
              color: #666666;
              text-decoration: line-through;
            }

            .keshi {
              margin-left: 10px;
              font-size: 18px;
              font-weight: 500;
              color: #666666;
            }
          }

          .ping {
            width: 100%;
            height: 30px;
            margin-top: 10px;
            position: relative;
            float: left;
            /deep/.el-rate__item{
             vertical-align: text-top;
            }
            .title1 {
              color: #888888;
              float: left;
              line-height: 30px;
              font-size: 16px;
            }

            .rate-main {
              float: left;
              height: 30px;
              line-height: 28px;
              margin-right: 10px;

              .el-rate__icon,
              .el-rate__decimal {
                line-height: 30px;
                font-size: 22px;
                margin-right: 4px;
              }

              .el-rate__text {
                position: relative;
                top: -2px;
              }
            }

            .teacher1 {
              float: left;
              line-height: 30px;
              color: #888888;
              font-size: 16px;
            }
          }

          .content {
            width: 100%;
            margin-top: 20px;
            height: 80px;
            line-height: 20px;
            font-size: 16px;
            color: #666666;
            float: left;
            text-align: left;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
          }

          .sou {
            padding: 0;
            width: 40px;
            height: 40px;
            line-height: 30px;
            color: #444444;
            position: absolute;
            background: rgba(0, 0, 0, 0);
            top: 10px;
            font-size: 16px;
            right: 0px;
            border: 1px solid #e8e8e8;
          }
        }
      }
    }

    .classroom-main {
      width: 1250px;
      margin: 0 auto;

      .el-breadcrumb {
        margin: 30px 0;
        font-size: 15px;
        padding-left: 10px;
      }
    }
  }
</style>
